import * as React from "react";
import * as echarts from "echarts";
import {fetchAllBudget} from "../../requests/BudgetManageRequest";
import {userBudgetWeeklyUsage} from "../../requests/DashboardRequest";
import {Card} from "antd";

export default class WeeklyBudgetUsageDonutChart extends React.Component{
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        userBudgetWeeklyUsage()
            .then((donutDomains) => {
                console.log(JSON.stringify(donutDomains))
                const dom = document.getElementById('user-budget-weekly-distribution');
                const donutChart = echarts.init(dom);
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    // title: {
                    //     text: '本周预算使用分布',
                    //     x: 'center',
                    //     y: 'top',
                    //     itemGap: 30,
                    //     // backgroundColor: '#EEE',
                    //     // textStyle: {
                    //     //     fontSize: 26,
                    //     //     fontWeight: 'bolder',
                    //     //     color: '#000080'
                    //     // },
                    // },
                    legend: {
                        // top: '5%',
                        x: 'center',
                        y: 'bottom',
                        // orient: 'vertical',
                        itemGap: 10,
                    },
                    series: [
                        {
                            name: '预算使用金额',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            // emphasis: {
                            //     label: {
                            //         show: true,
                            //         fontSize: '40',
                            //         fontWeight: 'bold'
                            //     }
                            // },
                            labelLine: {
                                show: false
                            },
                            data: donutDomains.result?.items?.map((item) => {return {name: item.name, value: item.value}})
                        }
                    ]
                };

                option && donutChart.setOption(option);
            })

    }
    render() {
        return (
                <div id="user-budget-weekly-distribution" style={{width: 400, height: 400}}/>
        );
    }
}